// ETimeDisplay.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Shapes

Item {
    id: clock
    width: 400
    height: 150

    // =======================
    // === 公共接口属性 ===
    // =======================
    property bool is24Hour: true                 // 是否使用24小时制
    property int displayMode: 1                 // 显示模式: 0=普通, 1=数码管, 2=机甲风, 3=霓虹
    property color textColor: "#00FFEE"          // 主数字颜色
    property color shadowColor: "#000000"        // 阴影颜色
    property real shadowOpacity: 0.25            // 阴影透明度
    property int shadowOffset: 3                 // 阴影偏移像素
    property color glowColor: "#00FFFF"          // 光晕颜色
    property int glowRadius: 12                  // 光晕半径
    property bool glowEnabled: true              // 是否启用光晕
    property int fontSize: 60                     // 数字字体大小
    property bool separatorBlink: true           // 分隔符闪烁
    property bool particleEnabled: true          // 秒数字粒子效果
    property string currentHour: ""              // 当前小时
    property string currentMinute: ""            // 当前分钟
    property string currentSecond: ""            // 当前秒

    // =======================
    // === 定时器更新时间 ===
    // =======================
    Timer {
        id: updateTimer
        interval: 1000               // 每秒触发一次
        running: true
        repeat: true
        onTriggered: updateTime()    // 每次触发调用更新时间函数
    }

    Component.onCompleted: updateTime()  // 组件创建完成立即更新时间

    // 更新时间函数
    function updateTime() {
        var now = new Date()
        var h = now.getHours()
        if (!is24Hour) {
            h = h % 12
            if (h === 0) h = 12
        }
        currentHour = h.toString().padStart(2, "0")
        currentMinute = now.getMinutes().toString().padStart(2, "0")
        currentSecond = now.getSeconds().toString().padStart(2, "0")
    }

    // =======================
    // === 数字显示布局 ===
    // =======================
    Row {
        id: digitalRow
        anchors.centerIn: parent
        spacing: 8

        // =======================
        // === 小时数字 ===
        // =======================
        Repeater {
            model: currentHour.length
            delegate: Item {
                width: fontSize * 0.9
                height: fontSize * 1.5

                // 模拟阴影
                Repeater {
                    model: shadowOffset
                    Text {
                        anchors.centerIn: parent
                        x: index
                        y: index
                        text: currentHour[index]
                        font.pixelSize: fontSize
                        font.bold: true
                        color: shadowColor
                        opacity: shadowOpacity / (index + 1)
                    }
                }

                // 主数字
                Text {
                    anchors.centerIn: parent
                    text: currentHour[index]
                    font.pixelSize: fontSize
                    font.bold: true
                    color: textColor
                }

                // 光晕层
                Rectangle {
                    anchors.centerIn: parent
                    width: glowEnabled ? fontSize + glowRadius : 0
                    height: glowEnabled ? fontSize + glowRadius : 0
                    radius: glowEnabled ? (fontSize + glowRadius)/2 : 0
                    color: glowColor
                    opacity: glowEnabled ? 0.2 : 0
                }

                // 数码管模式条纹（模式1）
                Rectangle {
                    anchors.fill: parent
                    color: displayMode === 1 ? "#003366" : "transparent"
                    opacity: 0.2
                }

                // 机甲风格数字描边（模式2）
                Text {
                    anchors.centerIn: parent
                    text: displayMode === 2 ? currentHour[index] : ""
                    font.pixelSize: fontSize
                    font.bold: true
                    color: "#FFAA00"
                    opacity: displayMode === 2 ? 0.5 : 0
                }

                // 霓虹风格数字描边（模式3）
                Text {
                    anchors.centerIn: parent
                    text: displayMode === 3 ? currentHour[index] : ""
                    font.pixelSize: fontSize
                    font.bold: true
                    color: "#FF00FF"
                    opacity: displayMode === 3 ? 0.4 : 0
                }
            }
        }

        // =======================
        // === 分隔符 ===
        // =======================
        Text {
            text: ":"
            font.pixelSize: fontSize
            color: textColor
            visible: separatorBlink ? (parseInt(currentSecond) % 2 === 0) : true
        }

        // =======================
        // === 分钟数字 ===
        // =======================
        Repeater {
            model: currentMinute.length
            delegate: Item {
                width: fontSize * 0.9
                height: fontSize * 1.5

                // 阴影
                Repeater {
                    model: shadowOffset
                    Text {
                        anchors.centerIn: parent
                        x: index
                        y: index
                        text: currentMinute[index]
                        font.pixelSize: fontSize
                        font.bold: true
                        color: shadowColor
                        opacity: shadowOpacity / (index + 1)
                    }
                }

                // 主数字
                Text {
                    anchors.centerIn: parent
                    text: currentMinute[index]
                    font.pixelSize: fontSize
                    font.bold: true
                    color: textColor
                }

                // 光晕层
                Rectangle {
                    anchors.centerIn: parent
                    width: glowEnabled ? fontSize + glowRadius : 0
                    height: glowEnabled ? fontSize + glowRadius : 0
                    radius: glowEnabled ? (fontSize + glowRadius)/2 : 0
                    color: glowColor
                    opacity: glowEnabled ? 0.2 : 0
                }

                // 数码管模式
                Rectangle {
                    anchors.fill: parent
                    color: displayMode === 1 ? "#003366" : "transparent"
                    opacity: 0.2
                }

                // 机甲风格描边
                Text {
                    anchors.centerIn: parent
                    text: displayMode === 2 ? currentMinute[index] : ""
                    font.pixelSize: fontSize
                    font.bold: true
                    color: "#FFAA00"
                    opacity: displayMode === 2 ? 0.5 : 0
                }

                // 霓虹风格描边
                Text {
                    anchors.centerIn: parent
                    text: displayMode === 3 ? currentMinute[index] : ""
                    font.pixelSize: fontSize
                    font.bold: true
                    color: "#FF00FF"
                    opacity: displayMode === 3 ? 0.4 : 0
                }
            }
        }

        // =======================
        // === 秒数字粒子效果 ===
        // =======================
        Item {
            width: fontSize * 0.8
            height: fontSize * 1.2
            visible: particleEnabled
            Text {
                anchors.centerIn: parent
                text: currentSecond
                font.pixelSize: fontSize / 1.5
                font.bold: true
                color: "#FF3366"
            }
            Repeater {
                model: 6
                Rectangle {
                    width: 2
                    height: 2
                    color: "#FF3366"
                    x: Math.random() * parent.width
                    y: Math.random() * parent.height
                    opacity: Math.random()
                }
            }
        }
    }

    // =======================
    // === 模式切换按钮 ===
    // =======================
    Button {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: "切换模式"
        onClicked: displayMode = (displayMode + 1) % 4 // 循环切换4种模式
    }
}
